/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */

//请求参数对象
const queryObj = {
    status: '',    //文章状态  (1-待审核，2-审核通过）空字符串-全部
    channel_id: '',   //筛选文章频道的id
    page: 1,         //页码
    per_page: 10    //每页条数
}
let totalCount = 0

async function getArtileList() {
    const res = await axios({
        url: 'v1_0/mp/articles',
        method: 'get',
        params: queryObj
    })
    console.log(res);
    const resHTML = res.data.results.map(item => {
        return `
        <tr>
        <td>
        <img src="${item.cover.type === 0 ? `https://img2.baidu.com/it/u=2640406343,1419332367&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500` : item.cover.images[0]}" alt="">
        </td>
        <td>${item.title}</td>
        <td>
            ${item.status === 1 ? `<span class="badge text-bg-primary">待审核</span>` : `<span class="badge text-bg-success">审核通过</span>`}
        </td>
        <td>
            <span>${item.pubdate}</span>
        </td>
        <td>
            <span>${item.read_count}</span>
        </td>
        <td>
            <span>${item.comment_count}</span>
        </td>
        <td>
            <span>${item.like_count}</span>
        </td>
        <td>
            <i class="bi bi-pencil-square edit" data-id="${item.id}"></i>
            <i class="bi bi-trash3 del" data-id="${item.id}"></i>
        </td>
        `   //在删除元素添加自定义属性，记录文章id，方便后面传入id删除
    }).join('')

    document.querySelector('.art-list').innerHTML = resHTML

    //3.1 保存并设置文章总条数
    //总条数
    totalCount = res.data.total_count
    document.querySelector('.total-count').innerHTML = `共${totalCount}条`
}
getArtileList()




/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */

async function getChannelList() {
    const res = await axios({
        //// 已在request.js中配置了基地址
        url: '/v1_0/channels'
    })
    console.log(res);   //由于响应拦截器，这里返回的数据是经过拦截器处理过的data
    // console.log(res.data.channels[0]);

    //<option value="1">频道1</option>
    document.querySelector('.form-select').innerHTML = '<option value="" selected>请选择文章频道</option>' + res.data.channels.map(item => {
        return `<option value="${item.id}">${item.name}</option>`
    }).join('')
}
getChannelList()

//状态分类选择
document.querySelectorAll('.form-check-input').forEach(item => {
    item.addEventListener('change', e => {
        // console.log(e.target.value);
        queryObj.status = e.target.value
    })
})
//频道选择
document.querySelector('.form-select').addEventListener('change', e => {
    // console.log(e.target.value);
    queryObj.channel_id = e.target.value
})

document.querySelector('.sel-btn').addEventListener('click', () => {
    getArtileList()
})


/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */

document.querySelector('.next').addEventListener('click', async () => {
    //Math.ceil()  向上取整     页面内不足条数也要显示为一页
    if (Math.ceil(totalCount / queryObj.per_page) > queryObj.page) {
        queryObj.page++
    } else {
        //超出则回到第一页
        queryObj.page = 1
    }

    //重新获取数据   这里等待请求结束，在执行后续操作
    await getArtileList()

    //页面显示当前页数
    document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
})

document.querySelector('.last').addEventListener('click', async () => {
    if (queryObj.page > 1) {
        queryObj.page--
    } else {
        queryObj.page = Math.ceil(totalCount / queryObj.per_page)
    }
    await getArtileList()
    document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
})

/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */

//利用事件委托
document.querySelector('.art-list').addEventListener('click', async e => {
    if (e.target.tagName === 'I' && e.target.classList.contains('del')) {
        // console.log(e.target);
        try {
            const res = await axios({
                //这个接口获取的id是通过path路径获取，通过路径传输
                url: `/v1_0/mp/articles/${e.target.dataset.id}`,
                method: 'delete',
            })

            console.log(res);

            //警示框显示
            myAlert(true, '删除成功')

            //删除最后一页的最后一条，需要自动向前翻页
            //判断当前表格的DOM元素是否是最后一条 如果时则让page--
            if (document.querySelectorAll('.art-list tr').length === 1) {
                //注意，当前页码为1时不能继续向前翻页
                if (queryObj.page !== 1) {
                    queryObj.page--
                }
            }

            // 4.4 重新获取文章列表，并覆盖展示
            getArtileList()


        } catch {
            myAlert(false, '删除失败' + res.response.status)
        }
    }
})




// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去

document.querySelector('.art-list').addEventListener('click', async e => {
    if (e.target.tagName === 'I' && e.target.classList.contains('edit')) {
        const artId = e.target.dataset.id
        // console.log(artId);
        //跳转同时传递文章 id 过去
        location.href = `../publish/index.html?id=${artId}`
    }
})